function random(min, max) {
    return Math.floor( Math.random() * (max-min+1)+min ) 
  }
  let wscObj =  document.querySelector('.wsc')
  let score = 0
  let wscX = 0
  let wscY = (window.innerHeight||document.documentElement.clientHeight) - wscObj.offsetHeight


  function startFoodPlay() 
  {
      return setInterval(() => {
        let imgObj = document.createElement('img')
        let who = random(0,9) 
        if ([6,8].includes(who))
        {
          imgObj.className = 'food guanjun'
          imgObj.src = './img/guanjun.jpg'
          imgObj.setAttribute('type', 'guanjun')
        } else 
        {
          imgObj.className = 'food hotdog'
          imgObj.src = './img/hotdog.jpg'
          imgObj.setAttribute('type', 'hotdog')
      }

      let min = 0
      let max = (window.innerWidth || document.documentElement.clientWidth) - imgObj.offsetWidth
      imgObj.style.left = random(min, max) + 'px'
      imgObj.style.top = '0px'
      document.body.appendChild(imgObj)
    }, 1000)
  }
  let foodT = startFoodPlay() 

  setInterval(() => {
    let foods = document.querySelectorAll('.food')
    foods.forEach((item, index) => {
      let top = parseInt(item.style.top) + 2
      let maxTop = (window.height || document.documentElement.clientHeight) - item.offsetHeight
      if (top >= maxTop) {
        document.body.removeChild(item)
      } else {
        item.style.top = top + 'px'
      }

      let foodX = parseInt(item.style.left)
      let foodY = parseInt(item.style.top) + item.offsetHeight
      if ( 
        (foodX>wscX && foodX<=(wscX+wscObj.offsetWidth))
        &&
        foodY>wscY
      ) {
        let type = item.getAttribute('type')
        type == 'guanjun' ? score+=5 : score++
        console.log(`食物坐标【${foodX},${foodY}】，王公子坐标【${wscX+wscObj.offsetWidth},${wscY+wscObj.offsetHeight}】，+1，总分【${score}}】`);
        document.querySelector('.game-score h1:nth-of-type(2)').innerText = `+${score}分`
        document.body.removeChild(item) 
        let divObj = document.createElement('div')
        divObj.className = 'show-score'
        divObj.innerText = type == 'guanjun' ? '+5' : '+1' 
        divObj.style.left = wscX+wscObj.offsetWidth + 'px'
        document.body.appendChild(divObj)
        setTimeout(() => document.body.removeChild(divObj), 1000)
      }
      
    })
  })

  
  document.onmousemove = function(evt) {
    let e = evt || window.event
    let wscObj = document.querySelector('.wsc')
    let left = e.clientX - wscObj.offsetWidth/2
    let maxLeft = (window.innerWidth || document.documentElement.clientWidth) - wscObj.offsetWidth
    if (left<0) left = 0
    if (left>=maxLeft) left = maxLeft
    wscObj.style.left = left + 'px'
    wscX = left
  }


  let time = 4
  function startTimePlay() 
  {
    return setInterval(() => {
      time--
      let gameScoreObj = document.querySelector('.game-score span')
      if (time>=0) {
        gameScoreObj.innerText = time
      }else {
        
        clearInterval(gameT) 
        clearInterval(foodT) 
        time = 60           
        
        let payPanel = document.querySelector('.play-panel')
        let payPanelStop = payPanel.querySelector('.stop')
        payPanel.querySelector('.score').innerText = score+'分'
        payPanel.style.display =  payPanelStop.style.display = 'block'
      }
    }, 1000)
  }
  let gameT = startTimePlay() 

 
 
  let startBtn = document.querySelector('.play-panel .stop .btn')
  startBtn.onclick = function() {
    
    score = 0             
    document.querySelector('.game-score h1:nth-of-type(2)').innerText = `+${score}分`
    
    foodT = startFoodPlay() 
    gameT = startTimePlay()
    
    let payPanel = document.querySelector('.play-panel')
    let payPanelStop = payPanel.querySelector('.stop')
    payPanel.style.display =  payPanelStop.style.display = 'none'
  }